<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#divbox{
				height:300px;
				width:300px;
				background-color: deepskyblue;
			}
			#pbox{
				height:100px;
				width:100px;
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div id="divbox">
			<p id="pbox"></p>
		</div>
		<script>
			//onmouseover和onmouseout 存在冒泡
			//存在层级关系，所以有冒泡
			// divbox.onmouseover=function(){
			// 	console.log("div移入")
			// }
			// pbox.onmouseover=function(){
			// 	console.log("p移入")
			// }
			
			// divbox.onmouseout=function(){
			// 	console.log("div移出")
			// }
			// pbox.onmouseout=function(){
			// 	console.log("p移出")
			// }
			
			//onmouseenter和onmouseleave 不存在冒泡、、
			//不存在层级关系，所以没有冒泡
			divbox.onmouseenter=function(){
				console.log("div移入")
			}
			pbox.onmouseenter=function(){
				console.log("p移入")
			}
			
			divbox.onmouseleave=function(){
				console.log("div移出")
			}
			pbox.onmouseleave=function(){
				console.log("p移出")
			}
		</script>
	</body>
</html>
